<#assign module="weixin"/>

<@override name="header">
</@override>
<@override name="body">

<div class="tabbable tabs-left">
	<div class="row">
		<div class="col-xs-12">
			<div class="orders-navt">
				<ul class="orders-nav">
	                <li class="orders-click"><a data-toggle="tab" class="orders-click-a">广告</a></li>
	            </ul>
	    	</div>
	    	<div class="orders-navh">
		       <button class="pull-right btn btn-primary addAdvertisement"><i class="icon-plus"></i>&nbsp;添加微信广告</button>
			</div>
		</div>
	</div>
</div>

<div class="tab-content">
	<div class="container-fluid ">
	 <@shiro.isMainCompany>
  		<div class="row query-pad">
  			<div class="col-xs-11" style="padding: 0px;">
      			<div class="col-xs-4 input-query">
      				<span>所属公司:</span>
      				<input type="text" class="form-control form-contb" id="companyName" name="companyName" placeholder="请输入公司名字"/>
        		</div>
        	  
    		</div>
    		<div class="col-xs-1"style="padding: 0px;">
    			<div class="input-query-bttom">
        			<button id="searchButton" type="button">查询</button>
        		</div>
    		</div>
  		</div>
  	 </@shiro.isMainCompany>	
  		<br/>
  	</div>
</div>

<!--列表-->
<div class="tabta-content">  	
	<table class="table table-condensed table-striped">
		<tbody id="advertisementTab">
			<tr>
				<tr>
					<th class="col-xs-3">链接地址</th>
					<@shiro.isMainCompany>
						<th>所属公司</th>
					</@shiro.isMainCompany>
					<th class="col-xs-4">排列顺序</th>
					<th class="col-xs-1">操作</th>
				</tr>
			</tr>
		</tbody>
	</table>
	
	<ul class="pagination pull-left pagination-sm pageshow" style="display:none;">
		<li><a></a></li>
	</ul>
	<ul class="pagination pull-left pagination-sm pagedata" style="display:none;">
    </ul>
</div>

<!--添加微信广告-->
<div class="form-horizontal">
	<div class="modal fade" id="createAdvertisement">
	   <div class="modal-dialog">
	     <div class="modal-content" style="width:800px;margin-left:-100px;">
	    	<div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        	<h4 class="modal-title">添加微信广告</h4>
	        </div>
		    <div class="modal-body" style="width:800px;">
	      	<form action=""  method="post">
	      	<@shiro.isMainCompany>
	      		<div class="form-group">
	                <label class="col-sm-3 control-label">所属公司:</label>
	                <div class="col-sm-8">
		                <select class="form-control" id="companyId" >
							<#if companys??>
								<option value="">请选择公司</option>
								<#list companys as company>
									<option value="${company.id}" <#if companyId?? && companyId==company.id>selected="selected"</#if>>${company.abbreviation?if_exists}</option>
								</#list>
							</#if>
						</select>
	                </div>
				 </div>
			 </@shiro.isMainCompany>
		         <div class="form-group">
                    <label class="col-sm-3 control-label">链接地址:</label>
                    <div class="col-sm-8">
                    	<input id="linkAddress"  class="form-control" ></input>
                    </div>
				 </div>
				 <label style="margin-left:200px;color:red">小提示：地址必须是http开头的哦</label></br>
		         <div class="form-group">
	                <label class="col-sm-3 control-label">排列顺序:</label>
	                <div class="col-sm-8">
	                	<input id="sequence" class="form-control" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"></input>
	                </div>
				 </div>
				 <label style="margin-left:200px;color:red">小提示：排列顺序是从小到大的</label></br></br>
				 <div class="form-group">
                    <label class="col-sm-3 control-label">广告图片:</label><span style="margin-left:-450px;">建议图片大小: 540×170</span>
                  	<div class="col-sm-6">
						<div style="margin-top:30px">
							<img id="picture_img" style=""/>
						</div>
						<input style="display:none;" type="file" name="picture_file" id="picture_file" accept=".bmp,.gif,.jpeg,.jpg,.png">
						<input id="picture" type="hidden"/>
					</div>
					<div class="col-sm-3">
						<button type="button" class="pull-left button button-pill button-flat-primary button-tiny " id="pictureUpload"><i class="glyphicon glyphicon-open"></i>&nbsp;图片上传</button>
					</div>
                 </div>
                 <label style="margin-left:200px;color:red">温馨提示：分公司总共能上传3张图片</label><br><br>
				   <div class="form-group">
                 	  <div class="col-sm-6">
                	  </div>
                	  <div class="col-sm-3">
					      <input  type="button" class="btn btn-primary" id="save" value="确定">
					      <button type="button" class="btn btn-default" id="close_createAdvertisement">关闭</button>
		        	  </div>
		           </div>  
		  	</form>
	     	</div>
	     </div>
	  </div>
	</div>
</div>
<!--修改广告图片-->
<div class="form-horizontal">
	<div class="modal fade" id="dialogUpdate">
	   <div class="modal-dialog">
	     <div class="modal-content" style="width:800px;margin-left:-100px;">
	    	<div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        	<h4 class="modal-title">编辑微信广告</h4>
	        </div>
		    <div class="modal-body" style="width:800px;">
	      	<form action=""  method="post">
	      		 <input type="hidden" id="id"/>
		         <div class="form-group">
                    <label class="col-sm-3 control-label">链接地址:</label>
                    <div class="col-sm-8">
                    	<input id="linkAddress2"  class="form-control" ></input>
                    </div>
				 </div>
				 <label style="margin-left:200px;color :red;">小提示：链接地址必须是以http://开头的哦</label><br>
		         <div class="form-group">
	                <label class="col-sm-3 control-label">排列顺序:</label>
	                <div class="col-sm-8">
	                	<input id="sequence2" class="form-control" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"></input>
	                </div>
				 </div>
				 <label style="margin-left:200px;color:red">小提示：排列顺序是从小到大的</label></br></br>
				 <div class="form-group">
                    <label class="col-sm-3 control-label">广告图片:</label><span style="margin-left:-450px;">建议图片大小: 540×170</span>
                  	<div class="col-sm-6">
						<div style="margin-top:30px">
							<img id="picture_img2" alt="未上传图片" />
						</div>
						<input style="display:none;" type="file" name="picture_file" id="picture_file2" accept=".bmp,.gif,.jpeg,.jpg,.png">
						<input id="picture2" type="hidden"  />
					</div>
                  	<div class="col-sm-3">
                  		<button type="button" id="picture_upload2" class="pull-left button button-pill button-flat-primary button-tiny " ><i class="glyphicon glyphicon-open"></i>&nbsp;图片上传</button>
	                </div>
                 </div>
                  <label style="margin-left:200px;color:red">温馨提示：分公司总共能上传3张图片</label><br><br>
				   <div class="form-group">
                 	  <div class="col-sm-6">
                	  </div>
                	  <div class="col-sm-3">
					      <input  type="button" class="btn btn-primary" id="update" data-id="" value="修改">
					      <button type="button" class="btn btn-default" id="closeUpdate">取消</button>
		        	  </div>
		           </div>
		  	</form>
	     	</div>
	     </div>
	  </div>
	</div>
</div>

</@override>
<@override name="footer">
<script type="text/javascript">
  var isMainCompany=false;
 <@shiro.isMainCompany>
      isMainCompany=true;
 </@shiro.isMainCompany>
</script>
<script src="${ctx}/assets/js/ajaxfileupload.js"></script>
<script src="${ctx}/assets/js/jquery.paging.min.js"></script>
<script src="${ctx}/assets/js/advertisement.js"></script>
<script type="text/javascript">
	var thisButton;
	function deleteAdvertisement() {
		if(thisButton.attr("data-value").trim()==null  || thisButton.attr("data-value").trim()==""){
			$.scojs_message("链接地址不存在！", $.scojs_message.TYPE_ERROR);
			return false;
		}
	    $.get('${ctx}/advertisement/deleteById',{'id':thisButton.attr("data-value")},function(data){
	            if(data.success){
	            	thisButton.parent().parent().remove();
	            	
	                $.scojs_message('删除成功!', $.scojs_message.TYPE_OK);
	                 setTimeout(function(){
							window.location.reload(true);
						}, 800);
	            } else {
	                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
	            }
	    },'json');
	}
	$(document).ready(function(){
	    $(document).on("click",".deletethis",function(){
	          thisButton = $(this);
	          var confirm = $.scojs_confirm({
	            content: "你真的要删除该广告吗？",
	            action:deleteAdvertisement
	          });
	          confirm.show();
	    });
	});
	
	
//添加微信广告
	$(document).on("click",".addAdvertisement",function(){
    	$('#createAdvertisement').modal();
    });
    $(document).on("click","#save",function(){
    			<@shiro.isMainCompany>
    			if($("#companyId").val()==""){
    				$.scojs_message("请选择所属公司！", $.scojs_message.TYPE_ERROR);
    				return false;
    			}
    			</@shiro.isMainCompany>
    			var linkAddress=$('#linkAddress').val().trim();
    			if(linkAddress==null || linkAddress==""){
    				$.scojs_message("请填写链接地址！", $.scojs_message.TYPE_ERROR);
    				return false;
    			}else{
					var filter  =  /^(http|https):\/\//;
					if(!filter.test($("#linkAddress").val())){
						$.scojs_message("链接地址必须是以http://或者https://开头的才行哟，亲", $.scojs_message.TYPE_ERROR);
						return false;
					}
    			}
    			if($('#sequence').val().trim()==null  || $('#sequence').val().trim()==""){
    			$.scojs_message("排序不能为空", $.scojs_message.TYPE_ERROR);
    				return false;
    			}
	     		$('#createAdvertisement').modal("hide");
				$.post('${ctx}/advertisement/createAdvertisement',
				{'companyId':$('#companyId').val(),'companyName':$('#companyId').find("option:selected").text(),
				'linkAddress':$('#linkAddress').val(),'sequence':$('#sequence').val(),
				'picture':$('#picture').val()},
				function(data){
		           if(data.success){
		                $.scojs_message("创建成功", $.scojs_message.TYPE_OK);
		                setTimeout(function(){
							window.location.reload(true);
						}, 300);
			       }else{
		                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
		                setTimeout(function(){
							window.location.reload(true);
						}, 3000);
			       }
			    },'json');
     });
    $("#close_createAdvertisement").click(function(){
		$('#createAdvertisement').modal("hide");
	});
//图片上传
	$("#picture_img").click(function(){
			$("#picture_file").click();
	});
	$("#pictureUpload").click(function(){
			$("#picture_file").click();
	});
	$(document).on('change','#picture_file',function(){
			if($.trim($(this).val())){
			 	$.ajaxFileUpload({
	                url:'${ctx}/advertisement/uploadImg',
	                secureuri:false,
	                fileElementId:'picture_file',
	                dataType: 'json',
	                data:{'type':'carType'},
	                success: function (result, textStatus) {
	                	$('#picture_img').attr('src','${ctx}/'+result.minurl);
	                	var url=''+result.minurl;
	                	$('#picture').val(url);
	                }
	            });
			}
	});
	
//修改微信广告
	$(document).on("click",".updateAdvertisement",function(){
		$("#linkAddress2").val($(this).attr('linkAddress'));
		$("#sequence2").val($(this).attr('sequence'));
		$('#picture_img2').attr('src',"${ctx}/"+$(this).attr('picture'));
		$("#picture2").val($(this).attr('picture'));
		$("#update").attr('data-id',$(this).attr('data-id'))
    	$('#dialogUpdate').modal();
		
    });
    $(document).on("click","#update",function(){
    			if($('#linkAddress2').val().trim()==null  || $('#linkAddress2').val().trim()==""){
    				$.scojs_message("请填写链接地址！", $.scojs_message.TYPE_ERROR);
    				return false;
    			}else{
					var filter  =  /^(http|https):\/\//;
					if(!filter.test($("#linkAddress2").val())){
						$.scojs_message("链接地址必须是以http://或者https://开头的才行哟，亲", $.scojs_message.TYPE_ERROR);
						return false;
					}
    			}
    			if($('#sequence2').val().trim()==null  || $('#sequence2').val().trim()==""){
    				$.scojs_message("排序不能为空", $.scojs_message.TYPE_ERROR);
    				return false;
    			}
	     		$('#dialogUpdate').modal("hide");
				$.post('${ctx}/advertisement/updateAdvertisement',
				{'id':$('#update').attr("data-id"),'linkAddress':$('#linkAddress2').val(),'sequence':$('#sequence2').val(),'picture':$('#picture2').val()},
				function(data){
					$('#update').attr("data-id","");
		           if(data.success){
		                $.scojs_message("修改成功", $.scojs_message.TYPE_OK);
		                setTimeout(function(){
							window.location.reload(true);
						}, 200);
			       }else{
		                $.scojs_message("修改失败", $.scojs_message.TYPE_ERROR);
		                setTimeout(function(){
							window.location.reload(true);
						}, 200);
			       }
			    },'json');
     });
    $("#closeUpdate").click(function(){
		$('#dialogUpdate').modal("hide");
	});
//编辑时图片上传
	$("#picture_upload2").click(function(){
			$("#picture_file2").click();
	});
	$("#picture_img2").click(function(){
			$("#picture_file2").click();
	});
	$(document).on('change','#picture_file2',function(){
			if($.trim($(this).val())){
			 	$.ajaxFileUpload({
	                url:'${ctx}/advertisement/uploadImg',
	                secureuri:false,
	                fileElementId:'picture_file2',
	                dataType: 'json',
	                data:{'type':'carType'},
	                success: function (result, textStatus) {
	                	$('#picture_img2').attr('src','${ctx}/'+result.minurl);
	                	var url=result.minurl;
	                	$('#picture2').val(url);
	                }
	            });
			}
	});
</script>
</@override>
<@extends name="../layout.ftl"/>